html+css 小白学习day1

我看的是千锋教育的web前端（算是笔记）我记得不是很详细，大家可以看视频哦！

1、初始代码英文！+tab键

2、语义化：根据内容，选择合适的标签

3、标题->双标签 <h1></h1>.......<h6></h6>    <h1>最重要且只能出现一次

     段落 <p>标签

4、文本修饰标签 

<strong>文本加粗     

<em>斜体   

上标<sub>    a₂ 就是a的平方  

下标<sup> 可以表示H2O中的2可以被表示到底下

<del> 删除

<ins>插入文本

5、图片标签和图片属性  <img>单标签

<img src="  ",alt=" "> 

src:引入图片的地址   

 alt：当图片出现问题的时候可以显示一段友好的提示文字，如果没有问题alt里面的内容是不显示的

title：表示一个提示信息   例如<img src="  ",alt=" " ，title=“ 这是一张图片”> ，就是当你的鼠标放到图片时就会显示title标签里面的文字

width、height：图片大小

6、引入文件的地址路径

7、跳转链接 就是你点击某一个标题跳转到某一个链接 <a></a>

<a href="放某一个链接" alt="">点击的内容,这个内容也可以是图片</a>

href属性：链接地址

targrt属性：可以改变链接打开的方式，默认情况下，在当前页面打开，就是你点击一个标题后会新建一个页面  target="_blank" ,但是在每一个里面都加太麻烦，在head里面加<base target="_blank">

8、跳转描点

 就是跳转到某一级

实现一：#号   id属性

<a href="#html">html</a>

<a href="#css">css</a>

<a href="#java">java</a>

<h2 id="html">Html超文本标记语言</h>

<p>模拟的段落</p>

<p>模拟的段落</p>

<p>模拟的段落</p>

<h2 id="css">Html超文本标记语言</h>

<p>模拟的段落</p>

<p>模拟的段落</p>

<p>模拟的段落</p>

<h2 id="java">Html超文本标记语言</h>

<p>模拟的段落</p>

<p>模拟的段落</p>

<p>模拟的段落</p>

实现二：#号  name属性

<a href="#html">html</a>

<a href="#css">css</a>

<a href="#java">java</a>

<a name="html"></a>

<h2 >Html超文本标记语言</h>

<p>模拟的段落</p>

<p>模拟的段落</p>

<p>模拟的段落</p>

<a name="css"></a>

<h2 >Html超文本标记语言</h>

<p>模拟的段落</p>

<p>模拟的段落</p>

<p>模拟的段落</p>

9、特殊符号

编写一些文本的时候，经常会遇到输入无法输入的字符，还有往一段文字中加入多个空格时，页面并不会解析出多个空格，这些无法输入和空格字符都是特殊字符，在html中，为这些特殊字符准备了专门的代码

空格符 &nbsp        版权&copy          注册商标&reg          小于号&lt         

大于号&gt              和号&amp          人民币&yen              摄氏度&deg

例如在内容中可以小于号没办法表示会冲突,可以这样表示

<p>

       &lt;html&gt;

<p>
10、无序列表

<ul><li>:列表的最外层容器、列表项       注：ul和li必须是组合出现的，他们之间是不能有其他标签的

   <ul>

              <li>第一项</li>

              <li>第二项</li>

   </ul>

type属性，改变前面标记的样式<ul type="">