a标签
常用属性
- href
- target
- download
| 属性 | 值 | 描述 | 备注 |
|---|---|---|---|
| href | URL | 规定链接的目标 URL | URL的取值 1.网址:href="http:/xxx.com" 2.路径:inde.html 以及 ./index.html 3.伪协议:javascript:代码、maito:邮箱、tel:手机号 4.id: href=#xxx |
| target | _blank：新窗口打开 _parent：在父窗口中打开链接。 _self：默认，当前页面跳转。 _top：在当前窗体打开链接，并替换当前的整个窗体(框架页)。 | 规定在何处打开目标 URL。仅在 href 属性存在时使用。 | href="1.html" target="xxx" （会打开一个名为xxx的窗口，如果xxx窗口已经存在，xxx窗口则会打开1.html这个页面） |
| download | 下载链接的地址 | 属性同样可以指定下载文件的名称。文件名称没有限定值，浏览器会自动在文件名称末尾添加该下载文件的后缀 (.img, .pdf, .txt, .html, 等)。 | 部分浏览器可能不支持 |
小提问：当我们要保留一个空的链接时改怎么办？
答：使用 href="javascript:;"或者href="javascript:void(0);" 而不是href=""、href="#"。因为href=""会导致页面刷新（所以是不是可以做成刷新键呢？🧐）,href="#"会导致页面直接回到顶部（所以是不是可以做成置顶键呢？🧐）
table标签
常用属性
- table
- thead
- tbody
- tfoot
- tr
- td
- th
标准结构
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot> //小提示：thead,tbody,tfoot的顺序不会实际显示效果。直接写tr、td时，不写tbody时浏览器会自动添加tbody
</table>
相关样式
table-layout:automatic（默认。列宽度由单元格内容设定。）|fixed(列宽由表格宽度和列宽度设定。)border-collapse:collapse（合并边框）|separate（默认，边框是分开的）border-spacing ：length length（规定相邻单元的边框之间的距离。使用 px、cm 等单位。不允许使用负值。）
img标签
作用
可以发起一个get请求，来获取照片
属性
alt当出图获取失败后提示的内容heightwidth设置图片的高和宽（建议：不知道图片的比例下，只用高宽中的一个,否则会导致图片变形）src图片的来源位置
<img alt='玫瑰图片' src='/xxx.jpg' height='100px' id='rose'>
事件
onload用来处理图片获取成功后的操作onerror用来处理图片获取失败后的操作
<script>
rose.onload = function(){
console.log('图片加载成功');
};
rose.onerror = function(){
console.log('图片加载失败');
rose.src="/404.png"; //更改备用照片
};
</script>
响应式
<style>
img{max-width:100%}
</style>
可替换元素
看看MDN的解释:在CSS中，可替换元素（replaced element）的展现效果不是由 CSS 来控制的。这些元素是一种外部对象，它们外观的渲染，是独立于 CSS 的。
<img src=xxx.jpg>
浏览器去下载 src 属性给到的图片，并用该图片资源替换掉 img 标签，而且浏览器在下载前并不知道图片的宽高。所以，可替换元素比较特殊，它的宽高是由其加载的内容决定的。（当然 CSS 可以覆盖其样式）
典型的可替换元素
- iframe
- video
- img
特定情况下的可替换元素
- option
- audio
- canvas
form标签 表单
作用
发起get或者post请求，然后刷新页面
属性
acition处理表单提交的 URL
method 决定提交表单时使用get/post
autocomplete 当value为on时（默认为on），会提示曾经输入过的相关内容，value为off不会
target 决定提交以后网页的变化，跟a标签的target属性相同
事件
onsubmit(提交)
form标签内须含有一个type=submit的input或者button，不写type=submit button默认。
小提示：input里面不能有其他的标签且支持纯文本内容；button里面支持其他标签.
看看代码
<form action="demo-form.php" method="get" target="_blank" autocomplete="on">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="提交">
</form>
input标签
作用
规定了用户可以在其中输入数据的输入字段。
常用属性
type:button/checkbox/emali/file/hidden/number/password/radio/search/tel/text
name/autofocus/checked/disabled/maxlength/pattern/value/placeholder
事件
onchange事件会在域的内容改变时发生运行脚本onfocus当窗口获得焦点时运行脚本onblur当窗口失去焦点时运行脚本
看看小栗子🌰
<form action="" method="GET" autocomplete="on">
搜索：<input type="search">
<br>
用户名：<input type="text" >
<br>
用户ID: <input type="number" >
<br>
Emali：<input type="email" >
<br>
电话号码：<input type="tel" maxlength="11">
<!-- maxlength可以现在输入的最大长度 -->
<br>
性别：<input type="radio" name="gender" >男
<input type="radio" name="gender" >女
<!-- 当选按钮需要保证name的value一致 -->
<br>
出生时间：<input type="date" name="" id="">
<br>
银行卡密码：<input type="password" name="" id="">
<br>
上传的文件：<input type="file" multiple>
<!-- 加上multple可以上传多个文件，不加则为一个 -->
<br>
喜欢的颜色：<input type="color" >
<br>
喜欢的事情：<input type="checkbox" name="hobby">唱
<input type="checkbox" name="hobby">跳
<input type="checkbox" name="hobby">rap
<input type="checkbox" name="hobby">敲代码
<br>
你现在的心情：<select >
<option value="">-请选择-</option>
<option value="1">好</option>
<option value="2">非常好</option>
<option value="3">超级好</option>
<option value="4">人生苦短</option>
</select>
<br>
自我评价：<br>
<textarea style="resize: none; width: 200px; height: 300px;"></textarea>
<!-- 没有resize: none用户可以改变输入框大小 -->
<br>
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
每日一语：坚持突破，而不是坚持重复。
