1.设置webstorm 输入内容超出屏幕后换行

webstorm内容超出屏幕换行.png

<hr> 分割线
<br> 换行

2.base标签:专门用来统一的指定当前的网页中所有的超链接(a标签)需要如何打开

<base target="_blank">

• 注意:base标签必须写在head标签的开始标签和结束标签之间

3.假连接:点击后不会跳转,我们称之为假链接!

1) <a href="#">百度一下,你就知道</a>  #的假链接会自动回到网页的顶部
2) <a href="javascript">百度一下,你就知道</a>  而Javascript的假链接不会自动跳转到网页顶部

• 两者之间的区别:#的假链接会自动回到网页的顶部,而Javascript的假链接不会自动跳转到网页顶部.

4.锚点:

• 要想通过a标签跳转到指定的位置,那么必须告诉a标签一个独一无二的身份证号码,这样a标签才能在当前界面中找到需要跳转到的目标位置.
• 1).给目标位置的标签添加一个id属性,然后指定一个独一无二的值;
• 2). 告诉a标签你需要跳转到的目标标签对应的独一无二的省份证号码是多少.

a标签 href="#center"
<a href="#center"></a>
目标标签里面设置 id="center"
<h1 id="center">中部位置</h1>

• 3).跳转到新界面的指定位置 href="13-锚点.html#bottom" target="_blank"新界面中打开

原界面中
<a href="13-锚点.html#bottom" target="_blank">跳转到新界面的指定位置</a>
目标界面中这样写
<h1 id="bottom">我是锚点测试界面333333</h1>

5.列表标签 :

• 无序列表 >>> 应用场景 : a).新闻列表 b).商品列表 c).导航条

快捷方式 : ul>li*3
<ul>
    <li>北京</li>
    <li>上海</li>
    <li>广州</li>
</ul>

• 有序列表 >>> 应用场景 : 排行榜

<ol>
    <li>演员</li>
    <li>小丑</li>
    <li>龙卷风</li>
    <li>青花瓷</li>
</ol>

• 定义列表 >>> 应用场景 : a) . 做网站尾部的相关信息 b) . 做图文混排
• dt dd 中还可以嵌套其他的标签

快捷方式: dl>(dt+dd)*2
<dl>
    <dt>北京</dt>  //definition title 定义标题
    <dd>中国的首都</dd>  //definition description 定义描述
    <dt>上海</dt>
    <dd>富人的集中地</dd>
</dl>

6.表格标签

<!--默认情况下,边框宽度为0-->
<table border="1">
    <!--tr:代表整个表格中的一行数据-->
    <tr>
        <!--td:代表一行中的一个单元格-->
        <td>姓名</td>
        <td>年龄</td>
        <td>籍贯</td>
    </tr>
    <tr>
        <td>张三</td>
        <td>18</td>
        <td>重庆</td>
    </tr>
</table>

• 细线表格

<!--细线表格:在表格上想通过指定外边距为0来实现细线表格是不靠谱的,其实它是将2条线合并为了一条线,
所以看上去很不舒服,故通过以下方式设置-->
<!--
1.给table标签设置bgcolor
2.给tr标签设置bgcolor
3.给table标签设置 cellspacing="1px",注意:我设置为1px边框显示不出来,设置为2px正常
-->
<table bgcolor="black" width="200px" cellspacing="2px">
    <tr bgcolor="white" align="center">
        <td>1.1</td>
        <td>1.2</td>
    </tr>
    <tr bgcolor="white" align="center">
        <td>2.1</td>
        <td>2.2</td>
    </tr>
</table>

• caption标签 >>>专门用来设置table的标题,标题会自动相对于表格的宽度居中
• th标签>>>专门用来设置标题的,会自动居中加粗
• td 标签>>>专门用来存储数据的

<table bgcolor="black" width="800px">
    <!--caption : 专门用来设置table的标题,标题会自动相对于表格的宽度居中-->
    <caption>
        <h2>今日小说排行榜</h2>
    </caption>
    <tr bgcolor="#a9a9a9" align="center">
        <!--th : 专门用来设置标题的-->
        <th>排名</th>
        <th>关键字</th>
        <th>趋势</th>
        <th>今日搜索</th>
        <th>最近七日</th>
        <th>先关链接</th>
    </tr>
    <tr bgcolor="white" align="center">
        <td>1</td>
        <td>陈二狗的妖孽人生</td>
        <td>上升</td>
        <td>678328</td>
        <td>28378173</td>
        <td>
            <a href="#">今日头条</a>
            <a href="#">网易新闻</a>
            <a href="#">新浪微博</a>
        </td>
    </tr>
</table>

caption 和 th 标签.png

• 表格的完整结构 (仅供了解)
• caption : 指定表格的标题
• thead : 指定表格的表头信息
• tbody : 指定表格的主题信息
• tfoot : 指定表格的附加信息/页尾信息

<table width="300px" bgcolor="black">
    <!--caption : 指定表格的标题-->
    <caption><h2>学生信息</h2></caption>
    <!--thead : 指定表格的表头信息-->
    <thead>
       <tr bgcolor="white" align="center">
          <th>姓名</th>
          <th>年龄</th>
       </tr>
    </thead>
    <!--tbody : 指定表格的主题信息-->
    <tbody>
       <tr bgcolor="white" align="center">
          <td>张三</td>
          <td>20</td>
       </tr>
       <tr bgcolor="white" align="center">
          <td>李四</td>
          <td>40</td>
       </tr>
    </tbody>
    <!--tfoot : 指定表格的附加信息/页尾信息-->
    <tfoot>
       <tr bgcolor="white" align="center">
           <td>2</td>
           <td>30</td>
       </tr>
    </tfoot>
</table>

表格的结构.png

• 单元格合并
• 1).水平方向上的单元格合并
  可以给 td标签添加一个 colspan属性,来指定把某一个单元格当做多个单
  元格来看待(水平方向)
  例如:<td colspan="2"></td>
  含义:把当前单元格当做两个单元格来看待
  注意点:
  a).由于把某一个单元格当做多个单元格来看待,所以会多出一些单元格,所以需要删除一些单元格才能正常显示
  b).一定要记住单元格合并永远都是向后或者向下合并,而不能向前或者向上合并
• 垂直方向上的合并
  可以给td标签设置一个rowspan 属性,来指定把某一个单元格当做多个单元格来看待(垂直方向)
  注意点:同上

<table bgcolor="black" width="300px" height = "150px">
    <tr bgcolor="white" >
        <!--垂直方向上合并-->
        <td rowspan="2"></td>
        <td></td>
        <td></td>
    </tr>
    <tr bgcolor="white" >
        <!--垂直方向上多了一行,删掉一行-->
        <!--<td></td>-->
        <td></td>
        <td></td>
    </tr>
    <tr bgcolor="white" >
        <td></td>
        <!--水平方向上的合并-->
        <td colspan="2"></td>
        <!--水平方向上多了一行,删掉一行-->
        <!--<td></td>-->
    </tr>
</table>

单元格的合并.png

7 . 表单标签

• 表单就是专门用来收集用户信息的
• 表单的格式 :

<form>
        <表单元素>
</form>

• input 元素 (一)

<form>
    <!--明文输入框-->
    账号:<input type="text">
    
    <!--暗文输入框-->
    密码:<<input type="password">
    
    <!--给输入框设置默认值-->
    账号:<input type="text" value="lnj">
    密码:<<input type="password" value="123">
    
    <!--
    单选框
    1.默认情况下单选框不会互斥,要想单选框互斥,那么必须给每一个单选框标签都设置一个name属性,
然后name属性还必须设置相同的值.
    2.要想让单选框默认选中某一个框,那么可以给input标签添加一个checked属性
    3.在HTML中,如果属性的取值和属性的名称一样,可以只写一个.但是在XHTML中必须写上取值,
所以在企业开发中我们推荐大家不要省略取值
    -->
    性别:
    <!--在html中可以这样写,但是xhtml中必须写上取值-->
    <!--<input type="radio" name="xx" checked>男-->
    <input type="radio" name="xx" checked="checked">男 //默认选种男
    <input type="radio" name="xx">女
    <input type="radio" name="xx">保密
    <!--复选框-->
    爱好:
    <input type="checkbox">篮球
    <input type="checkbox">足球
    <input type="checkbox" checked="checked">排球 //默认选种排球
    <input type="checkbox" checked="checked">棒球 //默认选种棒球
</form>

input 标签.png

• input 元素 (二)

<form action="http://www.it666.com">
    <!--明文输入框-->
    账号:<input type="text" name="aa"><br>
    <!--暗文输入框-->
    密码:<input type="password" name="bb"><br>

    <!--
    定义普通按钮
    可以通过value属性来给按钮指定标题
    作用: 配合JS完成一些操作
    -->
    <input type="button" value="我是按钮">
    <!--
    图片按钮
    作用: 配合JS完成一些操作
    -->
    <input type="image" src="images/register.jpg">
    <!--
    重置按钮
    作用: 用于清空表单中已经填写好的数据
    注意点:
    如果想想改重置按钮默认的按钮标题可以通过value属性来修改
    -->
    <input type="reset">
    <!--
    提交按钮
    作用: 将表单中已经填写好的数据, 提交到远程服务器
    注意点:
    要想把表单中填写好的数据提交到远程服务器, 必须具备两个条件
    1.需要给form表单添加一个action的属性, 通过这个action属性指定需要提交到的服务器地址
    2.需要给需要提交到服务器的表单元素添加一个name属性
    -->
    <input type="submit">
    
    <!--
    隐藏域
    作用 : 配合提交按钮将一些数据默默的悄悄咪咪的提交到服务器
    Ajax
    -->
    <input type="hidden" name="cc" value="kukuku">
</form>

input标签(二).png

• input 元素 (三) : 文字和输入框的绑定
  
  点击文字,输入框聚焦.png

<!--
1.默认情况下文字和输入框是没有关联关系的, 也就是说点击文字输入框不会聚焦, 如果想点击文字时让对应的输入框聚焦, 那么就需要让文字和输入框进行绑定
2.要想让输入框和文字绑定在一起, 那么我们可以使用Label标签
3.绑定的格式:
3.1将文字利用label标签包裹起来
3.2给输入框添加一个id属性
3.3在label标签中通过for属性和输入框中的id进行绑定即可
  <label for="account">账号:</label><input type="text" id="account">
-->
<form action="">
    <label for="account">账号:</label><input type="text" id="account"><br>
    <label for="pwd">密码:</label><input type="password" id="pwd"><br>
或者:
    <label>
        账号:<input type="text">  //这样有缺陷,账号只能绑定当前的input,不能绑定别的,推荐使用上面的方式
    </label>
</form>

• 给输入框绑定待选列表 datalist标签 (了解,众多浏览器不支持)

<body>
<!--
1.datalist标签
作用: 给输入框绑定待选项
2.datalist格式:
<datalist>
    <option>待选项内容</option>
</datalist>
3.如何给输入框绑定待选列表
1.搞一个输入框
2.搞一个datalist列表
3.给datalist列表标签添加一个id
4.给输入框添加一个list属性,将datalist的id对应的值赋值给list属性即可
-->
请输入你的车型: <input type="text" list="cars">
<datalist id="cars">
    <option>奔驰</option>
    <option>宝马</option>
    <option>奥迪</option>
    <option>路虎</option>
    <option>宾利</option>
</datalist>
</body>

datalist 输入框绑定待选列表.png

• input标签html5新增的类型 (仅供了解,众多浏览器不支持)

<form>
    <!--
    可以自动校验输入的内容是否符合邮箱的格式
    -->
    邮箱:<input type="email"><br>
    <!--
    可以自动校验输入的内容是否是URL地址
    -->
    域名:<input type="url"><br>
    <!--
    输入框中只能输入数字
    -->
    电话:<input type="number"><br>
    <!--
    可以通过日历来选择时间
    -->
    时间:<input type="date"><br>

    <!--
    可以通过取色板来选择颜色
    -->
    颜色: <input type="color"><br>

    <input type="submit">
</form>

input标签H5新增类型.png

• 表单标签中的其他标签

<!--
1.select标签
作用: 用于定义下拉列表
格式:
<select>
    <optgroup label="分组名称">
        <option>列表数据</option>
    </optgroup>
</select>
注意点:
1.下拉列表不能输入内容, 但是可以直接在列表中选择内容
2.可以通过给option标签添加一个selected属性来指定列表的默认值
3.可以通过给option标签包裹一层optgroup标签来给下拉列表中的数据分类
2.textarea标签
作用: 定义一个多行输入框
格式:
<textarea>
</textarea>
注意点:
1.默认情况下输入框可以无限换行
2.默认情况下输入框有自己的宽度和高度
3.可以通过cols和rows来指定输入框的宽度和高度, 但是虽然指定了列数和行数, 但是还是可以无限往下输入
4.默认情况下输入框是可以手动拉伸的
-->

不分组:
<select >
    <option >北京</option>
    <option >上海</option>
    <option >广州</option>
    <option >重庆</option>
</select>

select 不分组.png

分组:
<select>
  <optgroup label="北京">
      <option>朝阳区</option>
      <option>昌平区</option>
      <option>通州区</option>
  </optgroup>
  <optgroup label="重庆">
      <option>江北区</option>
      <option>渝中区</option>
      <option>南岸区</option>
  </optgroup>
</select>

设置分组.png

textarea:
<textarea name="" id="" cols="30" rows="10"></textarea> 
//通过cols和rows来指定输入框的宽度和高度

表单标签中的其他标签.png

• fieldset 标签 边框 (了解)

<form action="https://www.baidu.com">
    <fieldset>
        <legend>注册界面</legend>  //标题
        <label>
            账号:
            <input type="text">
        </label>
        <br>
        <br>
        <label>
            密码:
            <input type="password">
        </label><br>
    </fieldset>
</form>

设置边框.png