学习内容:html高级标签
学习语言:html
html寒假学习

HTML高级标签

  1. <html>
  2.     <head>
  3.         <meta charset="utf-8">
  4.         <title>document</title>
  5.     </head>
  6.     <body>
  7.         接下来,我要给大家讲解一个标签,叫&lt;div&gt;<br>
  8.         <ol type="i"  start="2">
  9.             <li>marvel</li>
  10.             <li>速8</li>
  11.             <li>返老还童</li>
  12.             <li>返老还童</li>
  13.             <li>返老还童</li>
  14.             <li>返老还童</li>
  15.             <li>返老还童</li>
  16.             <li>返老还童</li>
  17.             <li>返老还童</li>
  18.             <li>返老还童</li>
  19.             <li>返老还童</li>
  20.         </ol>
  22.         <a href="http://www.baidu.com">百度</a>
  23.         <a href="https://github.com/" target="blank"> <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3289781278,3563628311&fm=11&gp=0.jpg"
  24.             style="width: 200px;" alt="这是橙鼠鼠"></a>
  25.         <div id="demo001">锚点目的地</div>
  26.         <a href="#demo001">芜湖</a>
  27.         <a href="tel:13575622228">给老发打电话</a>
  28.         <a href="mailto:1762307994@qq.com">给鼠鼠发邮件</a>
  29.         <form method="GET" action="">
  30.             <p>用户名:<input type="text" name="username" value="请输出用户名" 
  31.                 onfocus="if(this.value=='请输出用户名'){this.value=' ';}" onblur="if(this.value==''){this.value='请输出用户名';}"></p>
  32.             <p>密码:<input type="password" name="password"></p>
  33.             <p>sd<input type="radio" name="1" value="1"></p>
  34.             <p>sd<input type="radio" name="1" value="2"></p>
  35.             <p>sd<input type="radio" name="1" value="3"></p>
  36.             <p>sd<input type="radio" name="1" value="4"></p>
  37.             <p>sd<input type="radio" name="1" value="5"></p>
  38.             <input type="submit">
  39.         </form>
  40.     </body>
  41. </html>

知识点

分隔符

html输入单词的时候需要加入英文单词分割符(“ “),且空格只能被当作分隔符使用,不能作为文本.

特殊编码

以 &....; 为格式
如果想要输入空格,可以使用 **&nbsp**;
如果想要输出<,可以使用 **&lt**;
如果想要输出>,可以使用 **&gt**;

高级标签

零碎知识点

html语言主要的分割方式为空格,而非逗号.

回车标签

<br>
单标签,用于换行

线标签

<hr>
用于生成线

有序列表标签

<ol>....</ol>
在之间使用元素标签来填充,
可以使用type="A"(字母排序)/"i"(罗马数字排序)/"1"(阿拉伯数字),默认的类型为”1”,
可以使用属性reversed="reversed来使得序号为倒序
可以使用start="%d" 来从某个位置开始,只填数字,与类型无关
用处不大

无序列表标签

<ul>....</ul>
很有用,用法类似于ol

元素标签

<li>.....</li>
可以在列表里面添加标签

图片标签

<img src="%s",图片的来源>
图片的来源:
1.网上url
2.本地绝对路径
3.本地相对路径(.html与图片文件不在一个文件夹)
style="width: 100px;"
通过style属性控制图片的宽度
alt="这是橙鼠鼠"
可以在图片加载不出来的时候,让图片的位置出现描述图像的文字,平时只在鼠标停留在上面的时候显示.

超链接标签

<a href="%s">%s</a>,超链接的url/图片路径,超链接在网站上面的显示
超链接在网站上面的东西可以用图片标签来包裹,实现点击图片到达新页面的功能
属性target="blank"可以让跳转的超链接出现的网页为新的,而非变换原来的.
其也可以当作锚点使用:
<a href="#%s">%s</a>,一个容器的标签-通常使用<div id="demo001">,在页面图像的形式,点击第二个%s时,可以直接跳转到id为第一个%s的容器的位置
其也可以打电话♂<a href="tel:13575622228">给老发打电话</a>
其也可以发邮件<a href="mailto:1762307994@qq.com">给鼠鼠发邮件</a>

表单标签

注:以下的组件必须被form框住

文本框组件

%s<input type="text">,这个输入框的名字
生成一个最基本的Text Field
可以通过name=" "来定义变量名,便于调用文本框里面的值

密码框组件

%s<input type="password">,这个密码框的说明
生成一个Text Field,但是输入的会被”*”代替,但是只有用户自己看不到
可以通过name=" "来定义变量名,便于调用文本框里面的值

提交组件

<input type="submit">
建立一个按钮用来提交数据,可以使用value=""来更改按钮的名称
提交成功之后导航栏会发生变化类似于file:///D:/CODE/front/html/a.html?username=wqe&password=wqe
需要将文本框命名之后才可以使其提交成功

单/多选组件

%s<input type="radio" name="%s" value="%s">,选项的名,这个多选题集的题号,选项的值
只有设置题号一样的单选组件才可以合并成一个只能取一个的单选组件,才能提交
而多选的,则将radio改成checkbox即可.
checked="checked"设置选项的默认值,使这个东西在初始状态已经被选中

  1. <p>choose you sex</p>
  2.         male<input type="radio" name="sex" value="male" checked="checked">
  3.         female<input type="radio" name="sex" value="female">
  4.         <p> <input type="submit" name="input"></p>

选择组件

会出现一个下拉菜单,按照option的顺序出现,使用submit组件来提交.如果在select组件里面限定了名字,那么option组件内部的name可以省略.同时option组件内部的value没有定义,那么其的输出值就是后面的东西.

  1. <form method="GET" action="">
  2.             <h1>choose you sex</h1>
  3.         <select name="sex" id="demo001">
  4.             <option value="male">male</option>
  5.             <option value="female">female</option>
  6.         </select>
  7.         <input type="submit">
  8. </form>