HTML+CSS学习笔记

P12

<!DOCTYPE html> 

位于html第一行

<meta charset="UTF-8">

采用"UTF-8"编码,避免乱码

P14 标题标签

<h1> - <h6>

注:h是head的缩写

P15 段落和换行标签

<p> - </p>

注:p是paragraph的缩写

<br />

强制换行

P18 div和span标签

div: 大盒子
span: 小盒子

P19 图像标签

<img src=""/>

P26 超链接标签

<a href="" target=""> 文本或图像 </a>

注:a为anchor

P28 锚点链接

<a href="#two" target=""> 文本或图像 </a>

目标位置标签,添加id属性

<h3 id="two">2集介绍</h3>

P33表格

<table>
  <tr>
    <th>表头单元格</th>
    <td>单元格</td>
  </tr>
</table>

P40 列表

无序:unordered

<ul>
  <li> 列表项1 </li>
</ul>

有序:ordered

<ol>
  <li> 列表项1 </li>
</ol>

自定义列表

<dl>
  <dt> 名词1</dt>
  <dd> 名词解释1</dd>
</dl>

P45 表单域

<form action="url地址" method="" name="表单域名词">
  用户名: <input type="text" name="username"> <br>
  密码:<input type="password" name="pwd"> <br>
  性别:男<input type="radio" name="sex"><input type="radio" name="sex">
</form>

注:单选按钮需有相同的name

P53 Label标签

用于绑定表单元素

P60 查阅文献

W3C

P66 CSS标签选择器

  • 标签选择器
  • 类选择器:单独选一个或几个标签
.red{
     color: red}
<li class="red"> </li>
  1. id选择器(只能调用一次)
#id名{
     
    color: red
}

P86 外部样式表

  1. 新建.css文件,写style内部的内容(不写style)
  2. 在html中link
<link rel="" href="">

P92 chrome调试工具

chrome中,右键,inspect看html+css

P98 后代选择器

元素1 元素2 {
     样式声明}

元素1是父级,元素2是子级

P99 子选择器

只能选择某元素的最近一级(亲儿子)

元素1>元素2 {
     样式声明}

P101 并集选择器

只能选择某元素的最近一级(亲儿子)

元素1, 元素2 {
     样式声明}

你可能感兴趣的:(HTML+CSS学习笔记)