网络三剑客：html css js
HTML hypertext makeup language 通过标签语言来标记要显示的网页的各个部分。
Html 不是一种编程语言，是一种标记语言
Html 标签格式：
- 成对出现的：闭合标签
- 单独出现的：自闭合标签
- 标签后可以加属性
- 标签可以嵌套，但不能交叉嵌套
- <标签名 属性1=属性值1 属性2=属性2值 。。。>内容</标签名>
- <!DOCTYPE> 声明浏览器文档使用哪种规范
HTML结构：
<!DOCTYPE html> <!--告诉浏览器使用什么样的html或者xhtml来解析html文档--> <html lang="en"> <!-- HTMl 文件声明开始 --> <head> <!-- head 元素不会出现在浏览器上，但相当于init文件，有很多初始化配置 --> <meta charset="UTF-8"> <!-- 设置网页但字符编码 --> <title>blog</title> <!-- 网页标题 在浏览器标题栏显示 --> </head> <body> <!-- body里的文本是可见的网页主体内容 --> 文件体 </body> </html>
常用标签
<head> 内常用的标签：
<!DOCTYPE html> <html lang="en"> <head> <!--meta 标签 meta 元素可提供有关页面的元信息，针对搜索引擎的描述和关键字。 --> <meta charset="UTF-8"> <!-- 设置网页但字符编码 --> <meta name="keywords" content="豆瓣，豆瓣读书，豆瓣电影"> <meta name="description" content="提供图书、电影、音乐唱片的推荐、评论和价格比较，以及城市独特的文化生活。"> <meta http-equiv="refresh" content="2;url=https://www.douban.com/"> <!-- 2是秒数，url是过2秒自动刷新的内容 --> <!-- meta 标签 --> <title>豆瓣</title> <link rel="icon" href="https://img3.doubanio.com/favicon.ico"> <!-- 网址上的图标--> <link rel="stylesheet" href="css%20formate.css"> <!--链接css格式文档--> </head> <body> 文件体 </body> </html>
<body>内常用的标签
<!DOCTYPE html> <html lang="en"> <head> <!--meta 标签 --> <meta charset="UTF-8"> <!-- 设置网页但字符编码 --> <title>豆瓣</title> </head> <body> 基本标签 <!--<hn> n的取值是1～6，从大到小，表示标题</hn>--> <h1>这是一级标题 块标签</h1> <p>段落标签，包裹到内容被换行，并且上下内容之间有一行空白 块标签 <b>加粗显示</b> <strong>这也是加粗显示</strong> </p> <em>斜体显示</em> 3<sup>2</sup> <!-- 上角标--> 3<sub>2</sub> <!-- 下角标--> <strike>划线标，一般用于打折到价钱</strike> <br> <!--br 换行标 --> 特殊符号：可以查网页 例： 表示空格 <div>空白标签 可以自己定义格式 块标签</div> 图形标签 <img src="https://img1.doubanio.com/view/photo/albumcover/public/p2145708997.webp" alt="图片没有加载出来时的提示" title="鼠标悬浮时提示的标题" width="100px" height="200px"> 超链接标签 <a href="class.html" target="_blank">click</a> <!--href 指定链接的网址，target="_blank"规定在新窗口打开，若不写则默认在原窗口打开 --> <p>href属性指定目标网页地址。该地址可以有几种类型： 绝对 URL - 指向另一个站点（比如 href="http://www.jd.com） 相对 URL - 指当前站点中确切的路径（href="index.htm"） 锚 URL - 指向页面中的锚（href="#top"） </p> 列表标签 无序列表[type 属性：disc（实心圆，默认）,circle（空心圆）,square(实心方块)] <ul type="disc"> <li>列表的第一项</li> <li>列表的第二项</li> <li>列表的第三项</li> </ul> 有序列表： <ol> <li>列表的第一项</li> <li>列表的第二项</li> <li>列表的第三项</li> </ol> 定义列表： <dl> <dt>列表标题</dt> <dd>第一项</dd> <dd>第二项</dd> <dd>第三项</dd> </dl> 表格标签 <p>属性: border: 表格边框. cellpadding: 内边距 cellspacing: 外边距. 像素 百分比.（最好通过css来设置长宽） rowspan: 单元格竖跨多少行 colspan: 单元格横跨多少列（即合并单元格）</p>
表格标签 <table border="1" cellspacing="0" cellpadding="0" bordercolor="blue"> <tr> <th align="center">字段1</th> <th align="center">字段2</th> <th align="center">字段3</th> </tr> <tr> <td align="center" rowspan="2">值1</td> <td align="center" colspan="2">值2</td> </tr> <tr> <td align="center">值2</td> <td align="center">值3</td> </tr> </table> </body> </html>
表单标签：
单独说说表单标签，是因为表单是HTML元素中较为复杂的部分，表单往往和脚本、动态页面、数据处理等功能相结合，因此它是制作动态网站很重要的内容。
表单一般用来收集用户的输入信息
表单工作原理：
访问者在浏览有表单的网页时，可填写必需的信息，然后按某个按钮提交。这些信息通过Internet传送到服务器上。
服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。当数据完整无误后，服务器反馈一个输入完成的信息
input标签
<1> 表单类型 type: text 文本输入框 password 密码输入框 radio 单选框 checkbox 多选框 submit 提交按钮 button 按钮(需要配合js使用.) button和submit的区别？ file 提交文件：form表单需要加上属性enctype="multipart/form-data" 上传文件注意两点： 1 请求方式必须是post 2 enctype="multipart/form-data" <2> 表单属性 name: 表单提交项的键. 注意和id属性的区别：name属性是和服务器通信时使用的名称； 而id属性是浏览器端使用的名称，该属性主要是为了方便客户端编程，而在css和javascript中使用的 value: 表单提交项的值.对于不同的输入类型，value 属性的用法也不同： type="button", "reset", "submit" - 定义按钮上的显示的文本 type="text", "password", "hidden" - 定义输入字段的初始值 type="checkbox", "radio", "image" - 定义与输入相关联的值 checked: radio 和 checkbox 默认被选中 readonly: 只读. text 和 password disabled: 对所用input都好使.
代码实例
<form> input标签 <p> name <input type="text" name="name"> </p> <p> password <input type="password" name="password"> <p> 性别 :<input type="radio" name="gender"> male <input type="radio" name="gender"> female </p> <p> 籍贯： <input type="checkbox" name="native palce" value="henan"> 河南 <input type="checkbox" name="native palce" value="hebei"> 河北 <input type="checkbox" name="native palce" value="hunan"> 湖南 <input type="checkbox" name="native palce" value="hubei"> 湖北 </p> <p> <input type="submit" value="注册"> </p> <p> <input type="button"> <input type="reset"> </p> </form>
select标签
''' <select> 下拉选标签属性 name:表单提交项的键. size：选项个数 multiple：multiple <optgroup>为每一项加上分组 <option> 下拉选中的每一项 属性： value:表单提交项的值. selected: selected下拉选默认被选中 '''
代码实例：
<form> <p> <select name="native place" multiple="multiple" size="2" > <option value="hebei" selected="selected">河北</option> <option value="henan">河南</option> <option value="hunan">湖南</option> <option value="hubei">湖北</option> </select> </p> </form>
<textarea> 多行文本框:
<form id="form1" name="form1" method="post" action="">
<textarea cols=“宽度” rows=“高度” name=“名称” placeholder="提示信息"
> 默认内容
</textarea>
</form>
<form> <p> 个人简介 <textarea cols="20" rows="20" name="personal" placeholder="个人简介"> 默认内容 </textarea> </p> </form>
<label>标签
定义：<label> 标签为 input 元素定义标注（标记）。
说明：
1 label 元素不会向用户呈现任何特殊效果。
2 <label> 标签的 for 属性值应当与相关元素的 id 属性值相同。
'''
<form method="post" action="">
<label for=“username”>用户名</label>
<input type=“text” name=“username” id=“username” size=“20” />
</form>