html5学习笔记

2023-10-03 17:50:22

<!--
	这是html注释
-->
<!doctype html>
<!--根-->
<html>
    <!--头-->
    <head>
        <title> 标题 </title>
    </head>
    <!--体-->
    <body>
        主体
    </body>
</html>

html不区分大小写，第一行表示html5

以上为html基本框架(以下学习省略基本模板，均为body中的内容)

编码格式

<meta charset = "utf-8">

html的表格

<table>
    <tr>
        <td>a</td>
        <td>b</td>
        <td>c</td>
    </tr>
    <tr>
    	<td>d</td>
        <td>e</td>
        <td>f</td>
    </tr>
</table>

一行的内容一格的内容

网页显示

a b c

d e f

可以用border ：边框与width与height控制table

align为对齐方式

<table  align = "center" border = "1px" width = "60%" height = "150px">

center也可为标题字对齐

<center><h1> 我是居中的标题  </h1></center>

表格的合并

列表格的合并

选择列在前的的表格，删掉列在后的表格

<td rowspan = "2">f</td>

rowspan为合并单元格的格子数

行表格的合并

随意删去其中一格

<td colspan = "2">d</td>

th标签

th标签也是单元格标签，比td多的是居中，加粗

thead，tbody，tfoot标签

此类标签不是table中必须的，只是方便后期js代码编写

<table border = 1px, width = 100px>
    <thead>
        <tr>
        	<th>员工编号</th>
        	<th>员工薪资</th>
        </tr>
    </thead>
    <tbody>
        <tr>
    		<td>1</td>
        	<td>100000</td>
        </tr>
    </tbody>
</table>

背景颜色与背景图案

bgcolor 为背景色

background 为背景图片

以下设置都是对背景进行设置

<body bgcolor = "red" background = "img/XX.png">

图片与img标签

单个图片

<img src = "img/XX.png" width = "100px" title = "一个图片" alt = "未找到图片"/>

设置图片的宽度，图片高度会等比例缩放

src是图片的路径

title设置鼠标悬停时显示的信息

alt 设置图片加载失败显示的提示信息

下面两种表示图片的方式相同

<img src = "img/xx.png" />
<img stc = "img/xx.png"></img>

超链接

<a href = "https://www.baidu.com">百度</a>

href : hot reference

href 后面可以是绝对路径也可以是相对路径，可以是网络中某个资源的路径，也可以是本地资源的路径

图片超链接

<a href = "https//www.hao123.com/">
	<img src = "img/hao123.png"/>
</a>

target属性（在哪一个窗口打开）

target可取

blank 新窗口

_self 当前窗口

_top *窗口

_parent 父窗口

列表

无序列表

表示列表一栏

<ul type = "circle">
    <li>china</li>
    <ul>
        <li>fujian</li>
        <li>beijing</li>
        <li>shanghai</li>
    </ul>
    <li>US</li>
    <li>British</li>
</ul>

有序列表

<ol type = "a">
    <li>水果</li>
    <li>蔬菜</li>
</ol>

表单★

表单时需要提交数据给服务器的 form中有一个action属性，这个属性是用来指定服务器地址的

action属性用来指定数据提交给哪个服务器的

action属性和超链接中href属性一样，都可以向服务器发送请求（request）

以下代码是画一个提交按钮，这个按钮可以提交表单

对于按钮来说，按钮上的value用来指定按钮上显示的文本信息

submit具有提交表单的能力

<input type = "submit" value = ”点我可以提交“>

button是一个普通按钮，不具备提交表单的能力

<input type = "button" value = "普通按钮点击没用">

超链接和表单都可以向服务器发送request，只不过表单发送的请求的同时可以携带数据，超链接发送的是固定不变的

表单提交数据给服务器的方式：action?name = value & name = value & name = value ……

★表单中有name属性的，一律会提交给服务器，不想提交这一项，就不要写name属性

★文本框和密码框的value不需要程序员指定，用户输入什么value就是什么

当name没有写的时候，value= 默认值是空字符串，会将空字符串提交给服务器

用table嵌套表单会更清晰，下面是一个用户注册的实例

用户注册：用户名，姓名，密码，确认密码，性别，兴趣爱好，学历，简介；

<form>
<table>
	<tr>
    	<td>用户名</td>
        <td><input type = "text" name = "username"/></td>
    </tr>    
    <tr>
    	<td>密码</td>
        <td><input type = "password" name = "userpwd"/></td>
    </tr>
    <tr>
    	<td>确认密码</td>
        <td><input type = "password"/></td>
    </tr>
    <tr>
    	<td>性别</td>
        <td><input type = "radio" name = "gender" value = 0/>男</td>
        <td><input type = "radio" name = "gender" value = 1/>女</td>
    </tr>
    <tr>
        <td>爱好</td>
    	<td><input type = "checkbox" name = "interest" value = "eat"/>吃饭</td>
        <td><input type = "checkbox" name = "interest" value = "sleep"/>睡觉</td>
        <td><input type = "checkbox" name = "interest" value = "play"/玩</td>
    </tr>
    <tr>
    	<td>学历</td>
        <td><select name = "grade">
            	<option value = "gz">高中</option>
            	<option value = "bk">本科</option>
            	<option value = "ss">硕士</option>
            </select></td>
    </tr>
    <tr>
    	<td>简介</td>
        <td>
        	<textarea row = "10" cols = "60" name = "introdection"></textarea>
        </td>
    </tr>
    <tr align = "center">
    	<td colspan = "2">
        	<input type = "submit" value = "登录" />
            &nbsp;&nbsp;
            <input type = "reset" value = "清空"/>
        </td>
    </tr>
</table>
</form>

码农公寓