自学前端总结-html基础1

 本文部分举例来自b站pink老师黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili、菜鸟教程

HTML 教程 | 菜鸟教程 (runoob.com)​ ​​​

用于本人学习记录，不完全按照知识点整理，仅供参考。

1.换行与段落

<p>双标签划分段落，前后有空行，<br>单标签另起一行

    1111111111111
    <p>段1<br /> 段2</p>
    1111111111111

结果

2.div与span

<div>我是一个div标签我一个人单独占一行</div>
<div>我是一个div标签我一个人单独占一行</div>
<span>百度</span>
<span>新浪</span>
<span>搜狐</span>

 3.图像标签及其属性

<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228" title="我是前端小白">

src内容书写图像地址，其与href的区别见003: src和href的区别是什么？ - 知乎 (zhihu.com)

alt内容为当图像无法加载时的替换文本

title为鼠标置于当前图像时的提示信息

4.相对路径

◆以“./”开头，代表当前目录和文件目录在同一个目录里，“./”也可以省略不写！

◆以"../"开头：向上走一级，代表目标文件在当前文件所在的上一级目录；

◆以"../../"开头：向上走两级，代表父级的父级目录，也就是上上级目录，再说明白点，就是上一级目录的上一级目录

◆以"/”开头，代表根目录

5.链接

<a href="http://www.qq.com" target="_blank"> 腾讯</a>

 target 打开窗口的方式  默认的值是 _self 当前窗口打开页面  _blank 新窗口打开页面

6.表单

6.1表单table有关标签

<tr><tr>框定一行，<td><td>框定一个单元格，<th><th>框定的单元内容加粗居中（首行使用）

 <table>
        <tr><th>姓名</th>  <th>性别</th> <th> 年龄 </th></tr>
        <tr><td>刘德华</td>  <td>男</td> <td> 56 </td></tr>
        <tr><td>张学友</td>  <td>男</td> <td> 58 </td></tr>
        <tr><td>郭富城</td>  <td>男</td> <td> 51 </td></tr>
        <tr><td>黎明</td>  <td>男</td> <td> 57 </td></tr>
 </table>

 可用<thead>，<tbody>使代码结构更清晰

6.2列表

在 HTML中，有两种类型的列表：

• 无序列表 ul - 列表项标记用特殊图形（如小黑点、小方框等）
• 有序列表 ol - 列表项的标记有数字或字母（order list）

使用 CSS，可以列出进一步的样式，并可用图像作列表项标记。

 6.3表单域form有关标签

        input标签:    type="text"、type="password"

 <!-- text 文本框 用户可以里面输入任何文字 -->
 用户名: <input type="text" name="username" value="请输入用户名" maxlength="6">   <br> 
 <!-- password 密码框 用户看不见输入的密码 -->
 密码: <input type="password" name="pwd" >  <br>

        

         input标签:    type="radio"、 type="checkbox"

<!-- 单选按钮和复选框可以设置checked 属性, 当页面打开的时候就可以默认选中这个按钮 -->
性别: 男 <input type="radio" name="sex" value="男"> 女  <input type="radio" name="sex" value="女" checked="checked"> 人妖   <input type="radio" name="sex" value="人妖">   <br> 
<!-- checkbox 复选框  可以实现多选 -->
爱好: 吃饭 <input type="checkbox" name="hobby" value="吃饭"> 睡觉 <input type="checkbox" name="hobby">  打豆豆 <input type="checkbox" name="hobby" checked="checked"> 

        单选按钮要加一个相同的name属性才可实现单选

<label for="text"> 用户名:</label> <input type="text" id="text" >
<input type="radio" id="nan" name="sex"> <label for="nan">男</label>
<input type="radio" id="nv"  name="sex"> <label for="nv">女</label>

         

         在单双选按钮后加一个框定选项信息的lable来增大按钮点击范围，lable中for=input标签id

select标签

 <select>
        <option>山东</option>
        <option>北京</option>
        <option>天津</option>
        <option selected="selected">火星</option>
 </select>

 文本域

<textarea cols="50" rows="5">pink老师,我知道这个反馈留言是textarea来做的 </textarea>

html的总结就到这里了，后面更新css的内容